﻿
@{
    ViewBag.Title = "Details";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<style>
    .dt_conten {
        width:100%;
    }
    .ct_shang {
        border: 1px solid #dee2e5;
        background: #fff;
        margin-top: 15px;
        overflow: hidden;
    }
    ul, ul li, dl, dl dt, dl dd, form, img, p, b, div, a {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .m_hs_tl {
        font-size: 18px;
        border-bottom: 2px solid #e9e9e9;
        line-height: 60px;
        overflow: hidden;
        background: #fff;
        width: 1200px;
        display:inline-block;
        height:60px;
    }
    .m_hs_tl li:hover, .m_hs_tl li.hover {
        color: #ff8a00;
    }

    .m_hs_tl li {
        float: left;
        margin: 0 25px;
        cursor: pointer;
        line-height: 60px;
    }
</style>
<link href="/Content/ytcms/css/totle_detail.css" rel="stylesheet" />
<link href="/Content/ytcms/css/scroll_ny.css" rel="stylesheet" />
@model YTCMS.Domain.Entities.hotel
@using App.Common;
@using YTCMS.Core;


<script>
    var fobj = $('#det_title').eq(0);
    var fpos = fobj.offset();
    var b = true;
    $(window).scroll(function () {
        if (b) {
            var scl_h = $(document).scrollTop() + 50;
            $(".qifo_t1").each(function (i) {
                var aa = $(this).offset().top;
                if (aa <= scl_h) {
                    $("#det_title li").eq(i).addClass("hover").siblings().removeClass("hover");
                    //$("#det_title").addClass("scroll");
                }
                
            });
        } b = true;
    });

</script>

<div class="container">
    <div class="dt_conten">
        <!--上正文-->
        <div class="ct_shang">

            <!--标题-->
            <div class="j_hotel_tl">@Model.Name</div>

            <!--滚动图-->

            <div class="gd_scroll">
                <!--滚动图开始-->
                <div id="container">

                    <!--左-->
                    <div class="left_scroll">
                        <p class="bip"><img alt="" id="dailyImage" src="@T.GetImages(Model.Id, Images.酒店).YTFirst().Replace("_120x120", "")"></p>
                        <p class="tip" id="dailyImageFrom"></p>
                    </div>

                    <!--图-->
                    <div class="right">
                        <div class="slide-pic" id="slidePic">
                            <a class=gray id=prev  href="javascript:;">前移</a>
                            <div class="pic-container">
                                <ul>
                                    @{
                                        var images = T.GetImagesByString(Model.Id, Images.酒店);
                                        if (images.Length>0)
                                        {
                                            for (int i = 0; i < images.Split(',').Length; i++)
                                            {
                                                <li><p><img src="@images.Split(',')[i].Replace("_120x120", "")"></p></li>
                                            }
                                        }    
                                    }
                                    
                                    
                                    
                                    @*<li class=cur><p><img src="/Content/ytcms/img/totle/20150509171615777_13.jpg" ></p></li>
                                    
                                    <li><p><img src="/Content/ytcms/img/totle/20150511094809000_105.jpg" ></p></li>
                                    <li><p><img src="/Content/ytcms/img/totle/20151213101711375_25.jpg" ></p></li>*@
                                    

                                </ul>
                            </div>
                            <a id=next  href="javascript:;">后移</a>
                        </div>

                        <script type=text/javascript>
                            
                            jQuery(function () {
                                if (!$('#slidePic')[0])
                                    return;
                                var i = 0, p = $('#slidePic ul'), pList = $('#slidePic ul li'), len = pList.length;
                                var elePrev = $('#prev'), eleNext = $('#next');

                                var w = 149, num = 3;
                                p.css('width', w * len);
                                if (len <= num)
                                    eleNext.addClass('gray');
                                function prev() {
                                    if (elePrev.hasClass('gray')) {

                                        return;
                                    }
                                    p.animate({
                                        marginTop: -(--i) * w
                                    }, 500);
                                    if (i < len - num) {
                                        eleNext.removeClass('gray');
                                    }
                                    if (i == 0) {
                                        elePrev.addClass('gray');
                                    }
                                }
                                function next() {
                                    if (eleNext.hasClass('gray')) {
                                        //alert('已经是最后一张了');
                                        return;
                                    }
                                    //p.css('margin-left',-(++i) * w);
                                    p.animate({
                                        marginTop: -(++i) * w
                                    }, 500);
                                    if (i != 0) {
                                        elePrev.removeClass('gray');
                                    }
                                    if (i == len - num) {
                                        eleNext.addClass('gray');
                                    }
                                }
                                elePrev.bind('click', prev);
                                eleNext.bind('click', next);
                                pList.each(function (n, v) {
                                    $(this).click(function () {
                                        if (n - i == 2) {
                                            next();
                                        }
                                        if (n - i == 0) {
                                            prev()
                                        }
                                        $('#slidePic ul li.cur').removeClass('cur');
                                        $(this).addClass('cur');
                                        show(n);
                                    }).mouseover(function () {
                                        $(this).addClass('hover');
                                    }).mouseout(function () {
                                        $(this).removeClass('hover');
                                    })
                                });
                                function show(i) {
                                    var ad ="@images";
                                    $('#dailyImage').attr('src', ad.toString().split(',')[i].replace("_120x120", ""));
                                }
                            });
                        </script>
                    </div>
                </div>
                <!--滚动图end-->


            </div>


        </div>
        <!--上正文end-->
        <!--下正文-->
        <div class="ct_shang md_shpin">
            <div id="det_title">
                <ul class="m_hs_tl">
                    <li class="hover">酒店详情</li>
                    <li>房型介绍</li>
                    <li>餐饮娱乐</li>
                </ul>
            </div>

            <div id="go1"></div>
            <!--酒店详情-->
            <div class="md_taoyan qifo_t1">
                <!--title-->
                <div class="md_dt_bg"><span><img src="/Content/ytcms/img/tc_03.png"></span>酒店详情</div>
                <div class="ztydtail_nr big_strong">
                    @Html.Raw(Model.Remark)
                </div>
            </div>
            <!--酒店详情end-->
            <div style="clear:both;"></div>


            <div id="go2"></div>
            <!--房型介绍-->
            <div class="md_taoyan qifo_t1 qifo_t2">
                

            </div>
            <!--房型介绍end-->
            <div style="clear:both;"></div>


            <div id="go3"></div>
            <!--餐饮娱乐-->
            <div class="md_taoyan qifo_t1  qifo_t3">
               
            </div>

            <!--餐饮娱乐end-->
            <div style="clear:both;"></div>




        </div>
        <!--下正文end-->
    </div>
</div>


